<template>
  <div class="page_winners_list">
    <div class="list_container list_container_desc ">
      <div class="list_container_title ">
        获奖说明
      </div>
      <p>{{winnerDesc}}</p>
    </div>

    <div ref="winnerList"
         class="list_container winners_list_container">
      <div class="list_container_title ">
        获奖名单
      </div>

      <template v-if="config.openType">
        <div v-for="(item,index) in winnerList"
             :key="index"
             class="winners_list_item flex align-center">
          <div :class="'winners_list_item_num'+index"
               class="winners_list_item_num ">{{index+1}}</div>
          <div class="winners_list_item_right flex-1">
            <p class="winners_list_item_name">{{item.girl}}&{{item.boy}}</p>
            <div class="winners_list_item_bottom flex align-end justify-between">
              <span class="winners_list_item_phone">{{item.phone?item.phone:item.nickNam}}</span>
              <span class="winners_list_item_goods">{{item.goods}}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <p class="in_statistics">获奖名单正在统计中,统计结果稍后公布</p>
      </template>
    </div>
  </div>
</template>

<script>
import { getWindowHeight } from "@/utils/utils";
export default {
  data() {
    return {
      config: {
        openType: 1// 0未开奖 1已开奖
      },
      winnerDesc: '活动已结束，最终排名前50名的用户获得实物奖励，我们会在3~4个工作日主动联系获奖用户，核实信息后进行奖品的发放，商品图片仅供参考，最终奖励以发放的实物为准。',
      winnerListHeight: 400,
      winnerList: []
    }
  },
  mounted() {
    // this.initWinnerListHeight()
  },
  created() {
    this.getWinnerList()
  },
  methods: {
    getWinnerList() {
      this.$api.apiWinnerList().then(res => {
        console.log('获奖名单', res);
        res.data.list.map(i => {
          if (i.phone) {
            i.phone = i.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
          }
        })
        this.winnerList = res.data.list
      })
    },
    initWinnerListHeight() {
      this.winnerListHeight = getWindowHeight() - this.$refs.winnerList.getBoundingClientRect().top - 25
    }
  }
}
</script>

<style lang='scss' >
.page_winners_list {
  min-height: 100vh;
  background-color: #ffe4ce;
  padding: 68px 20px 50px 20px;
  .list_container {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #000000;
    position: relative;
    .list_container_title {
      width: 245px;
      height: 58px;
      background-image: url("~@/assets/img/win_4.png");
      background-size: 100% 100%;
      line-height: 58px;
      position: absolute;
      left: 12px;
      top: -29px;
      text-align: center;
      font-size: 26px;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #492105;
    }
    &.list_container_desc {
      padding: 52px 20px 28px 20px;
      & > p {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 32px;
        text-indent: 2em;
      }
    }
    &.winners_list_container {
      padding-top: 50px;
      margin-top: 68px;
      // overflow-y: auto;
      min-height: 838px;
      .in_statistics {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 33px;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        text-align: center;
        transform: translate(-50%, -50%);
      }
      .winners_list_item {
        padding: 45px 28px 30px 30px;
        &:nth-child(odd) {
          background-color: #fff9f5;
        }
        &:nth-child(even) {
          background-color: #ffffff;
        }
        .winners_list_item_num {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 64px;
          text-align: center;
          background-size: 100% 100%;
          width: 60px;
          height: 64px;
          &.winners_list_item_num0 {
            font-size: 28px;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #333333;
            background-image: url("~@/assets/img/win_6.png");
          }
          &.winners_list_item_num1 {
            font-size: 28px;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #333333;
            background-image: url("~@/assets/img/win_3.png");
          }
          &.winners_list_item_num2 {
            font-size: 23px;
            font-family: PingFang-SC-Bold, PingFang-SC;
            font-weight: bold;
            color: #333333;
            background-image: url("~@/assets/img/win_5.png");
          }
        }
        .winners_list_item_right {
          margin-left: 30px;
          .winners_list_item_name {
            font-size: 28px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 28px;
            margin-bottom: 12px;
          }
          .winners_list_item_bottom {
            .winners_list_item_phone {
              font-size: 24px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;
              line-height: 20px;
            }
            .winners_list_item_goods {
              font-size: 28px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #b6180e;
              line-height: 28px;
            }
          }
        }
      }
    }
  }
}
</style>